<template>
  <div class="m-formb1">
    <div class="box">
      <div class="left">
        <div class="gp">
          <div class="label">养殖场名称</div>
          <div class="inpbox">
            <input type="text" class="inp" value="东风科技养殖场" />
          </div>
        </div>
        <div class="gp">
          <div class="label">地址</div>
          <div class="inpbox">
            <input type="text" class="inp" value="山东/青岛/李沧区" />
          </div>
        </div>
        <div class="gp">
          <div class="label">位置信息</div>
          <div class="inpbox nexticon">
            <input type="text" class="inp" value="116.255:255.621" />
            <img src="@img/adr.svg" alt="" class="adr">
          </div>
        </div>
        <div class="gpbox">
          <div class="gp">
            <div class="label">联系人</div>
            <div class="inpbox">
              <input type="text" class="inp" value="山东/青岛/李沧区" />
            </div>
          </div>
          <div class="gp">
            <div class="label">联系电话</div>
            <div class="inpbox">
              <input type="text" class="inp" />
            </div>
          </div>
        </div>
        <div class="gp">
          <div class="label">企业简介</div>
          <div class="inpbox">
            <textarea class="textarea inp">青岛XX养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来合作</textarea>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="gp">
          <div class="label">养殖场名称</div>
          <div class="filebox">
            <ul class="file-ls">
              <li>
                <div class="pic">
                  <div class="cls">
                    
                  </div>
                  <img src="@img/c-j1.jpg" alt="">
                </div>
              </li>
              <li>
                <div class="pic">
                  <div class="cls">
                  </div>
                  <img src="@img/c-j1.jpg" alt="">
                </div>
              </li>
              <li>
                <div class="pic">
                  <div class="cls">
                  </div>
                  <img src="@img/c-j1.jpg" alt="">
                </div>
              </li>
            </ul>
            <a-upload
              v-model:file-list="fileList"
              name="file"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              @change="handleChange"
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                class="icon" viewBox="0 0 84 84"
              >
                <path
                  fill-rule="evenodd"
                  stroke="rgb(62, 242, 252)"
                  stroke-width="1px"
                  stroke-dasharray="4, 2"
                  stroke-linecap="butt"
                  stroke-linejoin="miter"
                  opacity="0.302"
                  fill="none"
                  d="M0.500,0.500 L82.500,0.500 L82.500,82.500 L0.500,82.500 L0.500,0.500 Z"
                />
                <path
                  fill-rule="evenodd"
                  opacity="0.6"
                  fill="rgb(62, 242, 252)"
                  d="M61.500,42.500 L42.500,42.500 L42.500,61.500 L40.500,61.500 L40.500,42.500 L20.500,42.500 L20.500,40.500 L40.500,40.500 L40.500,20.500 L42.500,20.500 L42.500,40.500 L61.500,40.500 L61.500,42.500 Z"
                />
              </svg>
            </a-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="bot">
      <div class="btns">
        <div class="btn">取消</div>
        <div class="btn btn1">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

const fileList = ref([]);
const handleChange = info => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};

</script>

<style>
</style>